<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			//获得值
			function c() {
				alert(mui('#id_numbox2').numbox().getValue());
			}
			//设置值
			function s() {
				mui('#id_numbox1').numbox().setValue(55);
			}
			//更新属性
			function u() {
				mui('#id_numbox2').numbox().setOption('step', 3);
			}
		</script>
	</head>

	<body bgcolor="#FFFFFF">

		<div class="mui-content" align="center" style="padding: 8px;">
			<label> numbox(数字输入框)</label>
			<br />
			<div id="id_numbox1" class="mui-numbox" style="margin-top: 10px;">
				<!-- "-"按钮，点击可减小当前数值 -->
				<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
				<input class="mui-numbox-input" type="number" />
				<!-- "+"按钮，点击可增大当前数值 -->
				<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
			</div>
			<br />
			<div id="id_numbox2" class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='50' style="margin-top: 8px;">
				<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
				<input class="mui-numbox-input" type="number" />
				<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
			</div>
			<br />
			<button class="mui-btn" type="button" style="margin-top: 6px;width: 220px;" onclick="c()">getValue</button>
			<br />
			<button class="mui-btn" type="button" style="margin-top: 6px;width: 220px;" onclick="s()">setValue</button>
			<br />
			<button class="mui-btn" type="button" style="margin-top: 6px;width: 220px;" onclick="u()">updateSetting</button>
			<br />
		</div>
	</body>

	<!--
			作者：460575807@qq.com
			时间：2017-07-11
			描述：mui在mui.init()中会自动初始化基本控件,但是 动态添加的Numbox组件需要手动初始化mui(Selector).numbox()
		-->

</html>